<template>
  <div class="materials container-public">
    <Head></Head>
    <div class="materials-wrapper">
      <div class="pulic-login-title">
        <img class="logo" src="@/assets/home/color-head.png" alt="" />
        <span class="tip" v-show="thirdText">个人中心 > 用户认证 > {{thirdText}}</span>
      </div>
      <div class="materials-con">
        <div class="materials-con-left" ref="releaseNav">
          <b class="nav-title">我的</b>
          <span :class="['nav-item', activeIndex === 0 ? 'active' : '']" @click="changeNav(0, '个人资料')">个人资料</span>
          <span :class="['nav-item', activeIndex === 1 ? 'active' : '']" @click="changeNav(1, '用户认证')">用户认证</span>
          <span :class="['nav-item', activeIndex === 2 ? 'active' : '']" @click="changeNav(2, '密码设置')">密码设置</span>
        </div>
        <div class="materials-con-right">
          <UploadImg v-if='activeIndex===0'></UploadImg>
          <Authentication v-if='activeIndex===1 && !thirdText' @authentication="changeType"></Authentication>
          <EnterpriseAuthentication v-if='activeIndex===1 && thirdText==="企业交易商"'></EnterpriseAuthentication>
          <PersonalAuthentication v-if='activeIndex===1 && thirdText==="个人交易商"'></PersonalAuthentication>
          <PassSet v-if='activeIndex===2'></PassSet>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import UploadImg from "./UploadImg.vue";
import Authentication from './Authentication.vue'
import EnterpriseAuthentication from './EnterpriseAuthentication.vue'
import PersonalAuthentication from './PersonalAuthentication.vue'
import PassSet from './PassSet.vue'
export default {
  name: "Individual",
  components: {
    UploadImg,
    Authentication,
    EnterpriseAuthentication,
    PersonalAuthentication,
    PassSet
  },

  data() {
    return {
      activeIndex: 0,
      thirdText: '',
      textMap: {
        '1': '企业交易商',
        '2': '个人交易商'
      },
    };
  },
  mounted() {
  },
  methods: {
    changeNav(index, text) {
      this.activeIndex = index;
      document.documentElement.scrollTop = 0;
      this.thirdText = '';
    },
    changeType (type) {
      this.thirdText = this.textMap[type];
      document.documentElement.scrollTop = 0;
    },
  },
};
</script>
<style scoped lang='scss'>
@import "@/style/color.scss";
.materials {
  background: #fff;
}
.materials-wrapper {
  padding-bottom: 50px;
  .tip {
    font-size: 14px;
    color: #606266;
  }
}
.materials-con {
  display: flex;
  overflow: hidden;
  min-height: 70vh;
  .materials-con-left {
    box-sizing: border-box;
    width: 20%;
    margin-right: 40px;
    padding: 10px 40px;
    background: $bgColor;

    .nav-title {
      display: block;
      font-size: 16px;
      margin-top: 20px;
      width: 100%;
      padding-bottom: 10px;
      border-bottom: 2px solid #ccc;
      margin-bottom: 10px;
    }
    .nav-item {
      padding: 10px 20px;
      display: block;
      cursor: pointer;
    }
    .active {
      color: $blueColor;
    }
  }
  .materials-con-right {
    width: 70%;
  }
}
</style>